<template>
    <div>
      <p class="p1">为保证您的账户安全，需要对现在绑定的手机号进行短信验证</p>
      <p class="p2">({{tel}})</p>
      <div class="yanzheng">
        <input type="number" pattern="\d*" placeholder="请输入验证码" v-model="code">
        <mt-button type="primary" plain class="btnnn btnnnactive" v-if='bol' :disabled="bol">重新发送({{t}}s)</mt-button>
        <mt-button type="primary" plain class="btnnn" v-else @click="send()" :disabled="bol">发送验证码</mt-button>
      </div>
      <mt-button type="primary" class="btn111" @click="next()">下一步</mt-button>
    </div>
</template>

<script>
    export default {
        name: "Now",
      data(){
          return{
            t:'',
            code:'',
            bol:false,
            tel:'',
						phone:'',
          }

      },
      methods: {
				// 点击下一步
        next() {
          if (this.code=='') {
						this.$toast({
						  message:'请输入验证码',
						  position:'bottom'
						});
					}else{
            var data = {
              code:this.code,
            }
            this.axios.post(this.$store.state.url + "User/checkOldPhone",data).then(res=>{
              if (res.data.errcode == 0||res.data.errcode == '0'){
                // console.log(res.data);
                this.$router.push({
                  path:'/before',
									query:{
										oldcode:this.code
									}
                })
              }else {
                this.$toast({
                  message:res.data.msg,
                  position:'bottom'
                });
              }
            })
					}
        },
				// 发送验证码
        send() {
            this.bol = true;
            var that = this;
            var time = 60;
            var timer = setInterval(function () {
              time--;
              that.t = time

              if (time <= 0) {
                clearInterval(timer);
                that.t = '发送验证码';
                that.bol = false;
              }
            }, 1000)
            
            this.axios.get(this.$store.state.url + "User/sendOldSmsCode").then(res => {
              if (res.data.errcode == 0||res.data.errcode == '0') {
                // console.log(res.data)
                this.$toast({
                  message: res.data.msg,
                  position: 'center'
                });
								// localStorage.setItem('phone',res.data.data.tel);
              } else {
                this.$toast({
                  message: res.data.msg,
                  position: 'center'
                });
              }

            })
        }
      },
      mounted() {
				this.sdk.getJSSDK('','',this.$store.state.url);	
//         var tel = localStorage.getItem('phone');
// 				alert(tel);
        this.tel = this.$route.query.tel;
//         var tel1 = tel.substr(0,3) + "****" + tel.substr(7)
//         this.tel = tel1;
// 				this.phone=tel;
      }
    }
</script>

<style scoped>
  input{
    border: none;
    outline: none;
    font-size: 0.3rem;
  }

    .p1{
      font-size:0.24rem;
      font-weight:500;
      color:rgba(153,153,153,1);
      margin-top: 1rem;
      text-align: center;
    }
  .p2{
    font-size:0.26rem;
    font-weight:500;
    color:rgba(153,153,153,1);
    text-align: center;
    margin-top: 0.2rem;
  }
  .yanzheng{
    width: 84%;
    margin: auto;
    height: 0.9rem;
    border-bottom: 0.01rem solid rgba(237,237,237,1);
    margin-top: 1.3rem;
  }
    .yanzheng input{
      width: 3rem;
      float: left;
      margin-top: 0.4rem;
    }
    .yanzheng input::placeholder{
      font-size:0.3rem;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(153,153,153,1);
    }
    .btnnn {
      /* width:2.4rem; */
			padding: 0 .46rem;
      height:0.76rem;
      background:rgba(255,255,255,1);
      border:0.02rem solid rgba(2,135,255,1);
      border-radius:0.38rem;
      font-size:0.3rem;
      font-weight:500;
      color:rgba(2,135,255,1);
      float: right;
      margin-bottom: 0.2rem;
    }
		.btnnn.btnnnactive{
			border: 1px solid #EDEDED;
			background: #EDEDED;
			color: #999999;
		}
  .btn111{
    width: 84%;
    height: 0.88rem;
    display: block;
    margin: 0 auto;
    margin-top: 0.93rem;
    border-radius:0.44rem;
    font-size: 0.3rem;
    background:rgba(2,135,255,1);
  }
  input:focus::placeholder{
    color: transparent;
  }
</style>
